<template>
  <view class="template-order">

    <view class="order--wrap" :style="{ top: vuex_custom_bar_height + 'px' }">
      <!-- 顶部标签 -->

      <view class="tn-bg-white">
        <tn-tabs-swiper
          class="order__tabs"
          ref="tabs"
          itemWidth="220"
          activeColor="#3165CC"
          inactiveColor="#080808"
          :list="list"
          :current="tabsIndex"
          :isScroll="true"
          @change="tabsChange"
        ></tn-tabs-swiper>
      </view>
      <!-- 标签内容 -->
      <swiper
        class="order__swiper"
        :style="{ top: `${swiperTop}px`, height: `${swiperHeight}px` }"
        :current="swiperIndex"
        @transition="swiperTransition"
        @animationfinish="swiperAnimationFinish"
      >
        <swiper-item class="order__swiper__item">
          <scroll-view :style="{ height: `${swiperHeight}px` }" scroll-y>
            <view
              v-for="(item, index) in orderList"
              :key="index"
              class="order__item"
              @click="tn('/discoveryPages/form')"
            >
              <view
                class="order__item__head tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between"
              >
                <view class="order__item__head__title"
                  >订单编号：{{ item.id }}</view
                >
              </view>

              <view
                class="order__item__content tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between"
              >
                <view
                  class="order__item__content__image tn-flex tn-flex-direction-row tn-flex-col-center"
                >
                  <image
                    src="/static/zhuyi.png"
                    mode="aspectFill"
                    class="tn-margin-right"
                  ></image>
                  <view class="order__item__content__title">
                    {{ item.name }}
                  </view>
                </view>
                <view
                  class="order__item__content__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center"
                >
                  <view class="order__item__content__info__price">
                    <text class="order__item__content__info__price--unit"
                      >￥</text
                    >
                    <text
                      class="order__item__content__info__price__value--integer"
                      >{{ item.price }}</text
                    >
                    <!-- <text class="order__item__content__info__price__value--decimal">.00</text> -->
                  </view>
                  <!-- <view class="order__item__content__info__count">
										<text>共1件</text>
									</view> -->
                </view>
              </view>

              <view
                class="order__item__operation tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between"
              >
                <view class="order__item__operaation__left">
                  <text class="order__item__operaation__left--text">更多</text>
                </view>
                <view
                  class="order__item__operation__right tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-right"
                >
                  <view class="order__item__operation__right__button">
                    <tn-button
                      shadow
                      shape="round"
                      fontColor="tn-color-white"
                      backgroundColor="tn-bg-blue"
                      :fontSize="24"
                      height="auto"
                      padding="10rpx 18rpx"
                      >详情</tn-button
                    >
                  </view>
                </view>
              </view>
            </view>
            <view class="tn-padding-bottom"></view>
          </scroll-view>
        </swiper-item>

        <!-- 申请中 -->
        <swiper-item class="order__swiper__item">
          <scroll-view :style="{ height: `${swiperHeight}px` }" scroll-y>
            <view
              v-for="(item, index) in orderList"
              :key="index"
              class="order__item"
              @click="tn('/pages/service/serviceDetail/serviceDetail?type=1')"
              v-if="item.status == 1"
            >
              <view
                class="order__item__head tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between"
              >
                <view class="order__item__head__title"
                  >订单编号：{{ item.id }}</view
                >
              </view>

              <view
                class="order__item__content tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between"
              >
                <view
                  class="tn-flex tn-flex-nowrap tn-flex-direction-row tn-flex-col-center tn-flex-row-left"
                >
                  <view
                    class="order__item__content__image tn-flex tn-flex-direction-row tn-flex-col-center"
                  >
                    <image
                      src="/static/zhuyi.png"
                      mode="aspectFill"
                      class="tn-margin-right"
                    >
                    </image>
                    <view class="order__item__content__title">
                      {{ item.name }}
                    </view>
                  </view>
                </view>
                <view
                  class="order__item__content__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center"
                >
                  <view class="order__item__content__info__price">
                    <text class="order__item__content__info__price--unit"
                      >￥</text
                    >
                    <text
                      class="order__item__content__info__price__value--integer"
                      >{{ item.price }}</text
                    >
                    <!-- <text class="order__item__content__info__price__value--decimal">.00</text> -->
                  </view>
                  <!-- <view class="order__item__content__info__count">
											<text>共2件</text>
										</view> -->
                </view>
              </view>

              <view
                class="order__item__operation tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between"
              >
                <view class="order__item__operaation__left">
                  <text class="order__item__operaation__left--text">更多</text>
                </view>
                <view
                  class="order__item__operation__right tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-right"
                >
                  <view class="order__item__operation__right__button">
                    <tn-button
                      shadow
                      shape="round"
                      fontColor="tn-color-white"
                      backgroundColor="tn-bg-blue"
                      :fontSize="24"
                      height="auto"
                      padding="10rpx 18rpx"
                      >查看</tn-button
                    >
                  </view>
                </view>
              </view>
            </view>

            <view class="tn-padding-bottom"></view>
          </scroll-view>
        </swiper-item>

        <!-- 待评估 -->
        <swiper-item class="order__swiper__item">
          <scroll-view :style="{ height: `${swiperHeight}px` }" scroll-y>
            <view
              v-for="(item, index) in orderList"
              :key="index"
              class="order__item"
              v-if="item.status == 2"
            >
              <view
                class="order__item__head tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between"
              >
                <view class="order__item__head__title"
                  >订单编号：{{ item.id }}</view
                >
                <tn-tag
                  shape="radius"
                  backgroundColor="#ff7c10"
                  fontColor="#ffffff"
				  width="180"
                  >{{item.statustype}}</tn-tag
                >
              </view>

              <view
                @click="tn('/pages/service/serviceDetail/serviceDetail?type=2')"
                class="order__item__content tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between"
              >
                <view
                  class="order__item__content__image tn-flex tn-flex-direction-row tn-flex-col-center"
                >
                  <image
                    src="/static/zhuyi.png"
                    mode="aspectFill"
                    class="tn-margin-right"
                  >
                  </image>
                  <view class="order__item__content__title">
                    {{ item.name }}
                  </view>
                </view>
                <view
                  class="order__item__content__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center"
                >
                  <view class="order__item__content__info__price">
                    <text class="order__item__content__info__price--unit"
                      >￥</text
                    >
                    <text
                      class="order__item__content__info__price__value--integer"
                      > {{ item.price }}</text
                    >
                    <!-- <text
                      class="order__item__content__info__price__value--decimal"
                      >.00</text
                    > -->
                  </view>
                  <!-- <view class="order__item__content__info__count">
                    <text>共3件</text>
                  </view> -->
                </view>
              </view>

              <view
                class="order__item__operation tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between"
              >
                <view class="order__item__operaation__left">
                  <text class="order__item__operaation__left--text">更多</text>
                </view>
                <view
                  class="order__item__operation__right tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-right"
                >
                  <view class="order__item__operation__right__button">
                    <tn-button
                      shadow
                      shape="round"
                      fontColor="tn-color-white"
                      backgroundColor="tn-bg-cyan"
                      :fontSize="24"
                      height="auto"
                      padding="10rpx 18rpx"
                      @click="openQrcode()"
                      ></text
                      >去评估</tn-button
                    >
                  </view>
                </view>
              </view>
            </view>

            <view class="tn-padding-bottom"></view>
          </scroll-view>
        </swiper-item>
		
		<!-- 待确认 -->
        <swiper-item class="order__swiper__item">
          <scroll-view :style="{ height: `${swiperHeight}px` }" scroll-y>
            <view
              v-for="(item, index) in orderList"
              :key="index"
              class="order__item"
              @click="tn('/pages/service/serviceDetail/serviceDetail?type=1')"
              v-if="item.status == 3"
            >
              <view
                class="order__item__head tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between"
              >
                <view class="order__item__head__title"
                  >订单编号：{{ item.id }}</view
                >
              </view>
        
              <view
                class="order__item__content tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between"
              >
                <view
                  class="tn-flex tn-flex-nowrap tn-flex-direction-row tn-flex-col-center tn-flex-row-left"
                >
                  <view
                    class="order__item__content__image tn-flex tn-flex-direction-row tn-flex-col-center"
                  >
                    <image
                      src="/static/zhuyi.png"
                      mode="aspectFill"
                      class="tn-margin-right"
                    >
                    </image>
                    <view class="order__item__content__title">
                      {{ item.name }}
                    </view>
                  </view>
                </view>
                <view
                  class="order__item__content__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center"
                >
                  <view class="order__item__content__info__price">
                    <text class="order__item__content__info__price--unit"
                      >￥</text
                    >
                    <text
                      class="order__item__content__info__price__value--integer"
                      >{{ item.price }}</text
                    >
                    <!-- <text class="order__item__content__info__price__value--decimal">.00</text> -->
                  </view>
                  <!-- <view class="order__item__content__info__count">
        									<text>共2件</text>
        								</view> -->
                </view>
              </view>
        
              <view
                class="order__item__operation tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between"
              >
                <view class="order__item__operaation__left">
                  <text class="order__item__operaation__left--text">更多</text>
                </view>
                <view
                  class="order__item__operation__right tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-right"
                >
                  <view class="order__item__operation__right__button">
                    <tn-button
                      shadow
                      shape="round"
                      fontColor="tn-color-white"
                      backgroundColor="tn-bg-blue"
                      :fontSize="24"
                      height="auto"
                      padding="10rpx 18rpx"
                      >查看</tn-button
                    >
                  </view>
                </view>
              </view>
            </view>
        
            <view class="tn-padding-bottom"></view>
          </scroll-view>
        </swiper-item>

<!-- 待施工 -->
        <swiper-item class="order__swiper__item">
          <scroll-view :style="{ height: `${swiperHeight}px` }" scroll-y>
            <view
              v-for="(item, index) in orderList"
              :key="index"
              class="order__item"
              @click="tn('/pages/service/serviceDetail/serviceDetail?type=1')"
              v-if="item.status == 3"
            >
              <view
                class="order__item__head tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between"
              >
                <view class="order__item__head__title"
                  >订单编号：{{ item.id }}</view
                >
              </view>
        
              <view
                class="order__item__content tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between"
              >
                <view
                  class="tn-flex tn-flex-nowrap tn-flex-direction-row tn-flex-col-center tn-flex-row-left"
                >
                  <view
                    class="order__item__content__image tn-flex tn-flex-direction-row tn-flex-col-center"
                  >
                    <image
                      src="/static/zhuyi.png"
                      mode="aspectFill"
                      class="tn-margin-right"
                    >
                    </image>
                    <view class="order__item__content__title">
                      {{ item.name }}
                    </view>
                  </view>
                </view>
                <view
                  class="order__item__content__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center"
                >
                  <view class="order__item__content__info__price">
                    <text class="order__item__content__info__price--unit"
                      >￥</text
                    >
                    <text
                      class="order__item__content__info__price__value--integer"
                      >{{ item.price }}</text
                    >
                    <!-- <text class="order__item__content__info__price__value--decimal">.00</text> -->
                  </view>
                  <!-- <view class="order__item__content__info__count">
        									<text>共2件</text>
        								</view> -->
                </view>
              </view>
        
              <view
                class="order__item__operation tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between"
              >
                <view class="order__item__operaation__left">
                  <text class="order__item__operaation__left--text">更多</text>
                </view>
                <view
                  class="order__item__operation__right tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-right"
                >
                  <view class="order__item__operation__right__button">
                    <tn-button
                      shadow
                      shape="round"
                      fontColor="tn-color-white"
                      backgroundColor="tn-bg-blue"
                      :fontSize="24"
                      height="auto"
                      padding="10rpx 18rpx"
                      >查看</tn-button
                    >
                  </view>
                </view>
              </view>
            </view>
        
            <view class="tn-padding-bottom"></view>
          </scroll-view>
        </swiper-item>

<!-- 施工中 -->
        <swiper-item class="order__swiper__item">
          <scroll-view :style="{ height: `${swiperHeight}px` }" scroll-y>
            <view
              v-for="(item, index) in orderList"
              :key="index"
              class="order__item"
              @click="tn('/pages/service/serviceDetail/serviceDetail?type=1')"
              v-if="item.status == 4"
            >
              <view
                class="order__item__head tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between"
              >
                <view class="order__item__head__title"
                  >订单编号：{{ item.id }}</view
                >
              </view>
        
              <view
                class="order__item__content tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between"
              >
                <view
                  class="tn-flex tn-flex-nowrap tn-flex-direction-row tn-flex-col-center tn-flex-row-left"
                >
                  <view
                    class="order__item__content__image tn-flex tn-flex-direction-row tn-flex-col-center"
                  >
                    <image
                      src="/static/zhuyi.png"
                      mode="aspectFill"
                      class="tn-margin-right"
                    >
                    </image>
                    <view class="order__item__content__title">
                      {{ item.name }}
                    </view>
                  </view>
                </view>
                <view
                  class="order__item__content__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center"
                >
                  <view class="order__item__content__info__price">
                    <text class="order__item__content__info__price--unit"
                      >￥</text
                    >
                    <text
                      class="order__item__content__info__price__value--integer"
                      >{{ item.price }}</text
                    >
                    <!-- <text class="order__item__content__info__price__value--decimal">.00</text> -->
                  </view>
                  <!-- <view class="order__item__content__info__count">
        									<text>共2件</text>
        								</view> -->
                </view>
              </view>
        
              <view
                class="order__item__operation tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between"
              >
                <view class="order__item__operaation__left">
                  <text class="order__item__operaation__left--text">更多</text>
                </view>
                <view
                  class="order__item__operation__right tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-right"
                >
                  <view class="order__item__operation__right__button">
                    <tn-button
                      shadow
                      shape="round"
                      fontColor="tn-color-white"
                      backgroundColor="tn-bg-blue"
                      :fontSize="24"
                      height="auto"
                      padding="10rpx 18rpx"
                      >查看进度</tn-button
                    >
                  </view>
                </view>
              </view>
            </view>
        
            <view class="tn-padding-bottom"></view>
          </scroll-view>
        </swiper-item>

<!-- 待验收 -->
        <swiper-item class="order__swiper__item">
          <scroll-view :style="{ height: `${swiperHeight}px` }" scroll-y>
            <view
              v-for="(item, index) in orderList"
              :key="index"
              class="order__item"
              @click="tn('/pages/service/serviceDetail/serviceDetail?type=1')"
              v-if="item.status == 5"
            >
              <view
                class="order__item__head tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between"
              >
                <view class="order__item__head__title"
                  >订单编号：{{ item.id }}</view
                >
              </view>
        
              <view
                class="order__item__content tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between"
              >
                <view
                  class="tn-flex tn-flex-nowrap tn-flex-direction-row tn-flex-col-center tn-flex-row-left"
                >
                  <view
                    class="order__item__content__image tn-flex tn-flex-direction-row tn-flex-col-center"
                  >
                    <image
                      src="/static/zhuyi.png"
                      mode="aspectFill"
                      class="tn-margin-right"
                    >
                    </image>
                    <view class="order__item__content__title">
                      {{ item.name }}
                    </view>
                  </view>
                </view>
                <view
                  class="order__item__content__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center"
                >
                  <view class="order__item__content__info__price">
                    <text class="order__item__content__info__price--unit"
                      >￥</text
                    >
                    <text
                      class="order__item__content__info__price__value--integer"
                      >{{ item.price }}</text
                    >
                    <!-- <text class="order__item__content__info__price__value--decimal">.00</text> -->
                  </view>
                  <!-- <view class="order__item__content__info__count">
        									<text>共2件</text>
        								</view> -->
                </view>
              </view>
        
              <view
                class="order__item__operation tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between"
              >
                <view class="order__item__operaation__left">
                  <text class="order__item__operaation__left--text">更多</text>
                </view>
                <view
                  class="order__item__operation__right tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-right"
                >
                  <view class="order__item__operation__right__button">
                    <tn-button
                      shadow
                      shape="round"
                      fontColor="tn-color-white"
                      backgroundColor="tn-bg-blue"
                      :fontSize="24"
                      height="auto"
                      padding="10rpx 18rpx"
                      >确认验收</tn-button
                    >
                  </view>
                </view>
              </view>
            </view>
        
            <view class="tn-padding-bottom"></view>
          </scroll-view>
        </swiper-item>

<!-- 已完成 -->
        <swiper-item class="order__swiper__item">
          <scroll-view :style="{ height: `${swiperHeight}px` }" scroll-y>
            <view
              v-for="(item, index) in orderList"
              :key="index"
              class="order__item"
              @click="tn('/pages/service/serviceDetail/serviceDetail?type=1')"
              v-if="item.status == 5"
            >
              <view
                class="order__item__head tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between"
              >
                <view class="order__item__head__title"
                  >订单编号：{{ item.id }}</view
                >
              </view>
        
              <view
                class="order__item__content tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between"
              >
                <view
                  class="tn-flex tn-flex-nowrap tn-flex-direction-row tn-flex-col-center tn-flex-row-left"
                >
                  <view
                    class="order__item__content__image tn-flex tn-flex-direction-row tn-flex-col-center"
                  >
                    <image
                      src="/static/zhuyi.png"
                      mode="aspectFill"
                      class="tn-margin-right"
                    >
                    </image>
                    <view class="order__item__content__title">
                      {{ item.name }}
                    </view>
                  </view>
                </view>
                <view
                  class="order__item__content__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center"
                >
                  <view class="order__item__content__info__price">
                    <text class="order__item__content__info__price--unit"
                      >￥</text
                    >
                    <text
                      class="order__item__content__info__price__value--integer"
                      >{{ item.price }}</text
                    >
                    <!-- <text class="order__item__content__info__price__value--decimal">.00</text> -->
                  </view>
                  <!-- <view class="order__item__content__info__count">
        									<text>共2件</text>
        								</view> -->
                </view>
              </view>
        
              <view
                class="order__item__operation tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between"
              >
                <view class="order__item__operaation__left">
                  <text class="order__item__operaation__left--text">更多</text>
                </view>
                <view
                  class="order__item__operation__right tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-right"
                >
                  <view class="order__item__operation__right__button">
                    <tn-button
                      shadow
                      shape="round"
                      fontColor="tn-color-white"
                      backgroundColor="tn-bg-blue"
                      :fontSize="24"
                      height="auto"
                      padding="10rpx 18rpx"
                      >查看</tn-button
                    >
                  </view>
                </view>
              </view>
            </view>
        
            <view class="tn-padding-bottom"></view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>

    <view
      class="order--wrap"
      :style="{ top: vuex_custom_bar_height + 'px' }"
      v-if="orderList.length === 0"
    >
      <!-- 顶部标签 -->
      <view class="tn-bg-white">
        <tn-tabs-swiper
          class="order__tabs"
          ref="tabs"
          activeColor="#3165CC"
          inactiveColor="#080808"
          :list="list"
          :current="tabsIndex"
          :isScroll="false"
          @change="tabsChange"
        ></tn-tabs-swiper>
      </view>

      <view class="" style="padding: 30vh 20rpx">
        <view
          class="tn-text-center"
          style="font-size: 200rpx; padding-top: 30rpx"
        >
          <text class="tn-icon-wea-wind tn-color-gray--light"></text>
        </view>
        <view class="tn-color-gray tn-text-center tn-text-lg"
          >空空如也，<span
            class="tn-color-blue tn-text-center tn-text-lg"
            @click="tn('/pages/apply/apply')"
            >去申请</span
          >
        </view>
      </view>
    </view>
    <tn-modal v-model="codeShow" :custom="true">
      <view class="custom-modal-content">
        <uqrcode
          ref="uqrcode"
          canvas-id="qrcode"
          value="https://uqrcode.cn/doc"
          :options="{ margin: 10 }"
        >
        </uqrcode>
      </view>
    </tn-modal>
  </view>
</template>

<script>
import templatePageMixin from "@/libs/mixin/template_page_mixin.js";

export default {
  name: "TemplateOrder",
  mixins: [templatePageMixin],
  data() {
    return {
      // 当前选中的模式
      currentModeIndex: 0,
      orderList: [
        {
          id: "SF009098765798",
          name: "浴室地板改造方案",
          price: "1000.00",
          status: 1,
        },
        {
          id: "SF009098765798",
          name: "浴室地板改造方案",
          price: "1000.00",
          status: 1,
        },
        {
          id: "SF009098765798",
          name: "浴室地板改造方案",
          price: "1000.00",
          status: 2,
          statustype: "待能力评估",
        },
        {
          id: "SF009098765798",
          name: "浴室地板改造方案",
          price: "1000.00",
          status: 2,
          statustype: "待环境评估",
        },
        {
          id: "SF009098765798",
          name: "浴室地板改造方案",
          price: "1000.00",
          status: 3,
        },
        {
          id: "SF009098765798",
          name: "浴室地板改造方案",
          price: "1000.00",
          status: 4,
        },
        {
          id: "SF009098765798",
          name: "浴室地板改造方案",
          price: "1000.00",
          status: 5,
        },
      ],
      list: [
        {
          name: "全部",
        },
        {
          name: "申请中",
        },
        {
          name: "待评估",
          count: 10,
        },
        {
          name: "待确认方案",
        },
        {
          name: "待施工",
        },
        {
          name: "施工进行中",
        },
        {
          name: "待验收",
        },
        {
          name: "已完成",
        },
      ],
      tabsIndex: 0,
      swiperIndex: 0,
      swiperTop: 0,
      swiperHeight: 0,
      codeShow: false,
    };
  },
  // onReady() {
  // 	this.$nextTick(() => {
  // 		this.updateSwiperInfo()
  // 	})
  // },
  created() {
    console.log("11111");
    this.$nextTick(() => {
      this.updateSwiperInfo();
    });
  },

  methods: {
    // 跳转
    tn(e) {
      uni.navigateTo({
        url: e,
      });
    },

    // 计算可滑动区域的高度信息
    updateSwiperInfo() {
      // 获取可滑动菜单的信息
      this._tGetRect(".order__tabs").then((res) => {
        if (!res) {
          setTimeout(() => {
            this.updateSwiperInfo();
          }, 10);
          return;
        }
        const systemInfo = uni.getSystemInfoSync();
        this.swiperTop = res.bottom - this.vuex_custom_bar_height;
        this.swiperHeight =
          systemInfo.safeArea.height -
          res.bottom +
          systemInfo.statusBarHeight -
          this.swiperTop;
      });
    },
    // 标签栏值发生改变
    tabsChange(index) {
      this.swiperIndex = index;
      // console.log(index, this.swiperIndex, this.tabsIndex);
    },
    // swiper-item位置发生改变
    swiperTransition(event) {
      this.$refs.tabs.setDx(event.detail.dx);
    },
    // swiper动画结束
    swiperAnimationFinish(event) {
      const current = event.detail.current;
      this.$refs.tabs.setFinishCurrent(current);
      this.swiperIndex = current;
      this.tabsIndex = current;
    },
    openQrcode() {
      this.codeShow = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.template-order {
  background-color: #ffffff;
}

/* 胶囊*/
.tn-custom-nav-bar__back {
  width: 60%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 1000rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.5);
  color: #ffffff;
  font-size: 18px;

  .icon {
    display: block;
    flex: 1;
    margin: auto;
    text-align: center;
  }
}

.login {
  position: relative;
  height: 100%;
  z-index: 1;

  /* 内容 start */
  &__wrapper {
    width: 100%;
  }

  /* 切换 start */
  &__mode {
    position: relative;
    margin: 0 auto;
    width: 326rpx;
    height: 60rpx;
    margin-top: 16rpx;
    border: 1rpx solid #e6e6e6;
    border-radius: 39rpx;

    &__item {
      height: 77rpx;
      width: 100%;
      line-height: 77rpx;
      text-align: center;
      font-size: 31rpx;
      color: #aaaaaa;
      z-index: 2;
      transition: all 0.4s;

      &--active {
        font-weight: bold;
        color: #000000;
      }
    }
  }

  /* 切换 end */
}

.order {
  &--wrap {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    background-color: inherit;
  }

  /* 导航栏 start */
  &__tabs {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: inherit;
  }

  /* 导航栏 end */

  /* swiper start */
  &__swiper {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    background-color: inherit;
    // padding: 0 16rpx;
  }

  /* swiper end */

  /* 订单内容 start */
  &__item {
    margin: 20rpx;
    padding: 36rpx 26rpx;
    background-color: #ffffff;
    border-radius: 15rpx;
    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);

    &:first-child {
      margin-top: 40rpx;
    }

    &:last-child {
      margin-bottom: 0;
    }

    /* 头部 start */
    &__head {
      &__title {
        font-weight: bold;
        line-height: normal;

        &--right-icon {
          font-size: 24rpx;
          margin-left: 8rpx;
        }
      }

      &__status {
        font-size: 22rpx;
        color: #aaaaaa;
      }
    }

    /* 头部 end */

    /* 内容 start */
    &__content {
      margin-top: 20rpx;

      &__image {
        margin-right: 20rpx;

        image {
          width: 140rpx;
          height: 140rpx;
          border-radius: 10rpx;
        }
      }

      &__title {
        padding-right: 40rpx;
        display: -webkit-box;
        overflow: hidden;
        white-space: normal !important;
        text-overflow: ellipsis;
        word-wrap: break-word;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      &__info {
        &__price {
          &--unit {
            font-size: 20rpx;
          }

          &__value--integer,
          &__value--decimal {
            font-weight: bold;
          }

          &__value--decimal {
            font-size: 20rpx;
          }
        }

        &__count {
          color: #aaaaaa;
          font-size: 24rpx;
        }
      }
    }

    /* 内容 end */

    /* 操作按钮 start */
    &__operation {
      margin-top: 30rpx;

      &__right {
        &__button {
          margin-left: 10rpx;
        }
      }
    }

    /* 操作按钮 end */
  }

  /* 订单内容 end */
}

/* 二维码弹窗 */
.custom-modal-content {
  display: flex;
  justify-content: center;
}
</style>
